<template>
  <el-dialog :title="dialogs.title" :visible.sync="dialogs.show" :modal-append-to-body="false">
    <div class="form">
      <el-form
        :model="formData"
        ref="form"
        label-width="120px"
        style="margin:10px;width:auto;"
        :rules="rules"
      >
        <el-form-item label="收支类型" prop="type">
          <el-select v-model="formData.type">
            <el-option
              v-for="(item,index) in format_type"
              :key="index"
              :label="item"
              :value="item"
              placeholder="请选择收支类型"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="describe">
          <el-input v-model="formData.describe" placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-form-item label="收入" prop="income">
          <el-input v-model="formData.income" placeholder="请输入收入"></el-input>
        </el-form-item>
        <el-form-item label="支出" prop="expend">
          <el-input v-model="formData.expend" placeholder="请输入支出"></el-input>
        </el-form-item>
        <el-form-item label="账户现金" prop="cash">
          <el-input v-model="formData.cash" placeholder="请输入账户现金"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" placeholder="备注"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit('form')" >提交</el-button>
            <el-button @click="dialogs.show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "dialogs",
  props: {
    dialogs: Object,
    formData: Object
  },
  data() {
    return {
      format_type: ["手续费", "提现", "充值", "扣除", "转账"],
      rules: {
        type: [
          { required: true, message: "请选择收支类型", trigger: "change" }
        ],
        describe: [{ required: true, message: "请输入描述", trigger: "blur" }],
        income: [{ required: true, message: "请输入收入", trigger: "blur" }],
        expend: [{ required: true, message: "请输入支出", trigger: "blur" }],
        cash: [{ required: true, message: "请输入账户现金", trigger: "blur" }]
      }
    }
  },methods: {
      onSubmit(form){
          this.$refs[form].validate((valid)=>{
              if(valid){
                  const url = this.dialogs.option == "add"?"add":`edit/${this.formData.id}`
                  this.$axios.post(`/api/profile/${url}`,this.formData).then((result) => {
                      //添加成功
                    this.$message({
                        message:result.data.msg,
                        type:"success"
                    });
                    //隐藏dialog
                    this.dialogs.show = false;
                    //刷新数据
                    this.$emit("updata")
                  })
              }
          })
      }
  },
};
</script>
